<template>
  <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <!-- <h1>添加奶茶</h1>
    <el-form-item label="餐品" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="单价" prop="price" >
      <el-input type="price" v-model="ruleForm.price" autocomplete="off"></el-input>
    </el-form-item> -->
    <el-form-item label="图片" >
      <el-upload
        action=""
        accept="image/jpeg,image/gif,image/png"
        :on-change="onUploadChange"
        :auto-upload="false"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <!-- <el-upload
        id="file"
        type="file"
        name="file"
        :action=""
        accept="image/jpeg,image/gif,image/png"
        :auto-upload="false"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload> -->
    </el-form-item>
    <!-- <el-form-item label="简介" prop="content">
      <el-input type="textarea" v-model="ruleForm.content"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="state">
      <el-select v-model="ruleForm.state" placeholder="请选择活动区域">
        <el-option label="上架" value="上架"></el-option>
        <el-option label="下架" value="下架"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="上架时间" required>
      <el-col :span="11">
        <el-form-item prop="date">
          <el-date-picker type="date"  placeholder="选择日期"  v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item> -->
    <!-- <el-form-item>
      <el-button type="primary" @click="submitForm()">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item> -->
  </el-form>
</template>
<script>
  import $ from 'jquery'
  export default {
    data() {
      return {
        // file:'',
        // fileList:[],
        ruleForm: {
          name: '',
          price: '',
          // img: '',
          content: '',
          state:'',
          date: '',
        },
      };
    },
    created() {
          // this.token = localStorage.getItem('auth_code');
          // this.imageUrl = localStorage.getItem('imageUrl');
         
    },
    methods: {
      submitForm() {
        // var date=this.ruleForm.date.toLocaleString();
        //console.log(this.ruleForm.date);
        let date = new Date(this.ruleForm.date)
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        const time =  y + '-' + m + '-' + d;
        this.ruleForm.date=time;
        //console.log(this.ruleForm.date);

        //onUploadChange();
        //console.log(file.url);
        //   $.ajax({
        //  // url:'http://localhost:8081/exec/milktea/upload.php',
        //   type:"POST",
        //   dataType:'json',
        //   async:false,
        //   data: {
        //       name: this.ruleForm.name,
        //       price: this.ruleForm.price,
        //       // img: '',
        //       content: this.ruleForm.content,
        //       state:this.ruleForm.state,
        //       date1: this.ruleForm.date,
        //       //password: password,
        //   },
        //   success: function (res){
        //       //console.log("success");
        //   },
        //   error : function (res) {
        //       //console.log("error")
        //   }
        // })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //处理移除图片的操作
      handleRemove(file, fileList) {
        //console.log(file, fileList);
      },
      //处理图片预览效果
      handlePreview(file) {
       // console.log(file);
      },
      onUploadChange(file){
        //console.log(file);
        var reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = function(e){

          console.log(this.result)//图片的base64数据
        }
        //console.log(file.url);
        // $.ajax({
        //   url:'http://localhost:8081/exec/milktea/upload.php',
        //   type:"POST",
        //   dataType:'json',
        //   async:false,
        //   data: {
        //       name: file.name,
              
        //   },
        //   success: function (res){
        //       //console.log("success");
        //   },
        //   error : function (res) {
        //       //console.log("error")
        //   }
        // })
 
      },
      // beffff(file){
      //   console.log(file);
      // }
    }
  }
</script>
<style scoped>
.demo-ruleForm{
  width: 600px;
}
</style>